<template>
  <div class="page-wrap">
    <div class="page-title">CdsTagGroup</div>
    <div class="page-sub-title">基础用法</div>
    <div style="width: 400px">
      <div><cds-tag-group v-model="list" ></cds-tag-group></div>
      <div><cds-tag-group v-model="list" type='warning' ></cds-tag-group></div>
      <div><cds-tag-group v-model="list" type="success"></cds-tag-group></div>
      <div><cds-tag-group v-model="list" type="info" placement="bottom" ></cds-tag-group></div>
      <div><cds-tag-group v-model="list" type="danger" closable ></cds-tag-group></div>
      <div><cds-tag-group v-model="list1" :config="{key: 'tag_id', label: 'tag_name'}" closable ></cds-tag-group></div>
    </div>
    <highlightjs
      language="shell"
      :code="code"
    />
    <div class="page-sub-title">Attributes</div>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="field"
        label="参数">
      </el-table-column>
      <el-table-column
        prop="desc"
        label="说明">
      </el-table-column>
      <el-table-column
        prop="type"
        label="类型">
      </el-table-column>
      <el-table-column
        prop="available"
        label="可选值">
      </el-table-column>
      <el-table-column
        prop="default"
        label="默认值">
      </el-table-column>
    </el-table>
    <div class="page-sub-title">事件</div>
    <el-table
      :data="tableData2"
      style="width: 100%">
      <el-table-column
        prop="field"
        label="事件名">
      </el-table-column>
      <el-table-column
        prop="desc"
        label="说明">
      </el-table-column>
    </el-table>
    <div class="page-sub-title">可选中的标签组</div>
    <div><cds-check-tag-group v-model="list1" :max="3" :config="{key: 'tag_id', label: 'tag_name'}"  @change="tagChange" @selectedChange="selectedChange"></cds-check-tag-group></div>
    <highlightjs
      language="shell"
      :code="code1"
    />
    <div class="page-sub-title">Attributes</div>
    <el-table
      :data="tableData1"
      style="width: 100%">
      <el-table-column
        prop="field"
        label="参数">
      </el-table-column>
      <el-table-column
        prop="desc"
        label="说明">
      </el-table-column>
      <el-table-column
        prop="type"
        label="类型">
      </el-table-column>
      <el-table-column
        prop="available"
        label="可选值">
      </el-table-column>
      <el-table-column
        prop="default"
        label="默认值">
      </el-table-column>
    </el-table>
    <div class="page-sub-title">事件</div>
    <el-table
      :data="tableData3"
      style="width: 100%">
      <el-table-column
        prop="field"
        label="事件名">
      </el-table-column>
      <el-table-column
        prop="desc"
        label="说明">
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import CdsTagGroup from "../../../../packages/businessComponents/cdsTagGroup/src/tagGroup.vue";
import CdsCheckTagGroup from "../../../../packages/businessComponents/cdsCheckTagGroup/src/checkTagGroup.vue";
const list = ref([{id: 1, name: '11114444444444444444444444444444'}, {id: 2, name: '2222'}, {id: 3, name: '3333'},{id: 12, name: '1111'}, {id: 22, name: '2222'}, {id: 32, name: '3333'}]);
const list1 = ref([{tag_id: 1, tag_name: '11114444444444444444444444444444'}, {tag_id: 2, tag_name: '2222'}, {tag_id: 3, tag_name: '3333'},{tag_id: 12, tag_name: '1111'},{tag_id: 124, tag_name: '1111', checked: true}]);
const tableData = [
  {field: 'closable', desc: '是否可关闭标签', type: 'Boolean', available: 'true/false', default: 'false'},
  {field: 'type', desc: '标签默认样式', type: 'String', available: 'success， info， warning， danger， ""', default: ''},
  {field: 'placement', desc: '标签位置', type: 'String', available: 'top， bottom， left， right', default: 'top'},
  {field: 'width', desc: '标签最大宽度，当内容超过最大宽度， 鼠标hover显示tooltips， 否则不显示', type: 'Number', available: '数字即可', default: 150},
  {field: 'config', desc: '配置标签的key和label取值', type: 'Object', available: ' {key: id, label: name}', default:  ' {key: id, label: name}'},
]
const tableData1 = [
  {field: 'placement', desc: '标签位置', type: 'String', available: 'top， bottom， left， right', default: 'top'},
  {field: 'width', desc: '标签最大宽度，当内容超过最大宽度， 鼠标hover显示tooltips， 否则不显示', type: 'Number', available: '数字即可', default: 150},
  {field: 'config', desc: '配置标签的key和label取值', type: 'Object', available: ' {key: id, label: name}', default:  ' {key: id, label: name}'},
  {field: 'max', desc: '最大可选的tag个数', type: 'Number', available: '', default:  '-'},
]
const tableData2 = [
  {field: 'click', desc: '点击 Tag 时触发的事件'},
  {field: 'close', desc: '关闭 Tag 时触发的事件'},
]
const tableData3 = [
  {field: 'change', desc: 'Tag 点击时触发的事件， 返回当前点击的tag'},
  {field: 'selectedChange', desc: 'Tag 点击时触发的事件, 返回所有被选中的tag'},
]

const tagChange = (val) => {
  console.log(val)
}
const selectedChange  = (val) => {
  console.info(val)
}
const code = `
<template>
      <div><cds-tag-group v-model="list" ></cds-tag-group></div>
      <div><cds-tag-group v-model="list" type='warning' ></cds-tag-group></div>
      <div><cds-tag-group v-model="list" type="success"></cds-tag-group></div>
      <div><cds-tag-group v-model="list" type="info" placement="bottom" ></cds-tag-group></div>
      <div><cds-tag-group v-model="list" type="danger" closable ></cds-tag-group></div>
      <div><cds-tag-group v-model="list1" :config="{key: 'tag_id', label: 'tag_name'}" closable ></cds-tag-group></div>
</template>

`

const code1 = `
<template>
  <div>
    <cds-check-tag-group
    v-model="list1"
    :max="3"
     ></cds-check-tag-group>
  </div>
</template>

`
</script>

<style lang="scss">


</style>
